<template>
  <div style="margin: 10px 0 0 0">
    <!--  顶框内容按钮  -->
    <div>
      <!-- 按钮栏 -->
      <el-form ref="queryForm" size="mini" :inline="true">
        <el-input prefix-icon="el-icon-search" size="mini" style="width: 210px"
                  v-model="robotApiUriName" placeholder="根据任务名称模糊搜索" clearable @clear="clearForm">
        </el-input>
        <el-button style="margin-left: 5px" size="mini" type="primary" icon="el-icon-search" @click="getRobotApiUriPageList">搜索</el-button>
        <el-button style="margin-left: 5px" size="mini" type="primary" icon="el-icon-plus" @click="openCreate">新增</el-button>
      </el-form>

    </div>

    <!-- 表格,分页 栏 -->
    <div style="margin: 10px 0 0 0; width: 100%">
      <el-table
          :height="'73vh'"
          ref="multipleTable"
          :data="table.data"
          :stripe=true
          :border=true
      >

        <el-table-column
            prop="name"
            label="接口名称"
            align="center"
            width="450"/>

        <el-table-column
            prop="uri"
            label="接口 uri"
            align="center"
        />

        <el-table-column
          prop="enable"
          label="是否启动"
          align="center"
          width="100">
          <template #default="{row, column, $index}">
            <el-switch
              :value="row.enable === 1"
              :active-color="row.enable === 1 ? '#13ce66' : '#cccccc'"
              :inactive-color="row.enable === 1 ? '#13ce66' : '#cccccc'"
              @change="updateEnable(row.id)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          sortable label="创建时间"
          align="center"
          width="200"
          :formatter="replaceCharacter"
        />
        <el-table-column
          prop="updateTime"
          sortable label="修改时间"
          align="center"
          width="200"
          :formatter="replaceCharacter"
        />

        <el-table-column
            label="操作"
            align="center"
            width="200"
        >
          <template #default="{row}">
            <el-button style="color: #70a1ff;font-weight: bold" size="mini" type="text" icon="el-icon-edit" @click="openUpdate(row)">
              修改
            </el-button>
            <el-popconfirm
              style="margin-left: 10px"
              title="删除此内容吗？"
              @confirm="delTableRow(row.id)"
            >
              <el-button style="color: #ff4757;font-weight: bold" slot="reference" size="mini" type="text" icon="el-icon-delete">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div style="margin: 50px 0 0 0">
        <el-pagination
            background
            :page-sizes="[10, 30, 50, 100]"
            :page-size="table.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="table.total"
            :page-count="table.pages"
            :current-page="table.current"
            @size-change="table.handleSizeChange"
            @current-change="table.handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹出栏位 -->
    <el-dialog
        title="添加/修改接口"
        :visible.sync="dialogVisible"
        width="45%">
      <el-form label-width="100px" :model="ruleForm" :rules="rules">
        <el-form-item label="接口名称" prop="name">
          <el-input
              type="name"
              v-model="ruleForm.name"
              placeholder="请输入接口名称"
              :show-word-limit=true
          />
        </el-form-item>

        <el-form-item label="接口uri" prop="uri">
          <el-input
              type="uri"
              v-model="ruleForm.uri"
              placeholder="请输入接口 uri"
              :show-word-limit=true
          ></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer">
          <el-button type="info" @click="cancel">取消</el-button>
          <el-button type="primary" @click="commit">提交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { isNull } from "@/utils/service";
import { getRobotApiUriPageList, commitRobotApiUri, updateRobotApiUri, modifyStatus, delRobotApiUri } from "@/views/robot/interfaceManage/api"

export default {
  name: "interfaceManage",
  computed: {},
  mounted() {
    this.getRobotApiUriPageList();
  },
  data() {
    let _vm = this
    return {
      robotApiUriName: "",
      ruleForm: {
        id: void 0,
        name: '',
        uri: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        uri: [
          { required: true, message: "请输入接口 uri", trigger: 'blur' },
          { min: 5, max: 60, message: '长度在 5 到 60 个字符', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      table: {
        tbLoading: false,
        /* 选中行数据 */
        sRows: [],
        data: [],
        pageNo: 1,
        pages: 0,
        pageSize: 10,
        pageCount: 0,
        sortField: "",
        sortMode: void 0,
        handleSizeChange(pageSize) {
          if (pageSize === _vm.table.pageSize) {
            return;
          }
          _vm.table.pageSize = pageSize;
          _vm.getRobotApiUriPageList();
        },
        handleCurrentChange(pageNo) {
          if (pageNo === _vm.table.pageNo) {
            return;
          }
          _vm.table.pageNo = pageNo;
          _vm.getRobotApiUriPageList();
        },
        sRowChange(rows) {
          _vm.table.sRows = rows;
        }
      },
    }
  },
  methods: {
    isNull,
    commit() {
      if (this.callFunc === 'createFunc'){
        this.createFunc()
      }
      if (this.callFunc === 'updateFunc'){
        this.updateFunc()
      }
    },
    openCreate() {
      this.ruleForm.name = ''
      this.ruleForm.uri = ''
      this.callFunc = 'createFunc'
      this.dialogVisible = true
    },
    openUpdate(row) {
      this.ruleForm.id = row.id
      this.callFunc = 'updateFunc'
      this.dialogVisible = true
    },
    replaceCharacter(row, column, cellValue, index) {
      return !isNull(cellValue) ? cellValue : "-";
    },
    /*获取自动化机器接口任务列表*/
    getRobotApiUriPageList() {
      let params = {
        pageNo: this.table.pageNo,
        pageSize: this.table.pageSize,
        name: this.robotApiUriName
      }
      this.table.loading = true;
      getRobotApiUriPageList(params).then((res) => {
        this.table.data = res.list
        this.table.pages = res.pages
        this.table.total = res.total
      }).finally(() => {
        this.table.loading = false;
      })
    },
    updateEnable(id) {
      let param = { id : id}
      modifyStatus(this, param, () => {
        this.$message.success("修改成功")
        // 修改状态成功刷新页面
        this.getRobotApiUriPageList()
      })
    },
    delTableRow(id) {
      let param = { id : id }
      delRobotApiUri(this, param, () => {
        this.$message.success("删除任务成功")
        this.getRobotApiUriPageList()
      })
    },
    createFunc() {
      // 新增数据
      let params = {
        name: this.ruleForm.name,
        uri: this.ruleForm.uri,
      }
      commitRobotApiUri(this, params, () => {
        this.$message.success("提交成功")
        // 提交成功关闭弹出框
        this.ruleForm.name = ''
        this.ruleForm.uri = ''
        this.dialogVisible = false
        this.getRobotApiUriPageList()
      })
    },
    updateFunc() {
      // 修改数据
      let params = {
        id: this.ruleForm.id,
        name: this.ruleForm.name,
        uri: this.ruleForm.uri,
      }
      updateRobotApiUri(this, params, () => {
        this.$message.success("提交成功")
        // 提交成功关闭弹出框
        this.ruleForm.name = ''
        this.ruleForm.uri = ''
        this.dialogVisible = false
        this.getRobotApiUriPageList()
      })
    },
    clearForm() {
      this.robotApiUriName = "";
      this.getRobotApiUriPageList();
    },
    cancel() {
      this.dialogVisible = false
    }
  },
}
</script>